<template>
  <view class="review-orders">
    <!-- 加载状态 -->
    <uni-load-more v-if="loading" status="loading"></uni-load-more>
    
    <!-- 无订单提示 -->
    <view v-else-if="reviewOrders.length === 0" class="empty-orders">
      <text>暂无待评价订单</text>
      <view class="action-buttons">
        <button type="primary" class="goto-shop" @tap="goToShop">去逛逛</button>
        <button type="default" class="refresh-btn" @tap="fetchReviewOrders">刷新</button>
      </view>
    </view>

    <view v-else class="order-list">
      <view 
        v-for="order in reviewOrders" 
        :key="order._id"
        class="order-card animate__animated animate__fadeIn"
      >
        <view class="order-header">
          <text class="order-no">订单号: {{ order.order_no }}</text>
          <text class="order-status">待评价</text>
        </view>
        
        <view class="order-content">
          <view 
            v-for="item in order.products" 
            :key="item.id"
            class="order-item"
          >
            <image 
              :src="url('sp',item.image-1,'png')" 
              mode="aspectFill"
              class="item-image"
            />
            <view class="item-info">
              <text class="item-name">{{ item.name }}</text>
              <text class="item-spec">{{ formatSpecs(item.specs) }}</text>
              <view class="item-price-qty">
                <text class="price">¥{{ item.price }}</text>
                <text class="quantity">x{{ item.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="order-footer">
          <view class="total">
            共{{ order.products.length }}件商品
            <text class="total-amount">合计: ¥{{ order.total_price }}</text>
          </view>
          <view class="actions">
            <button class="btn-review" @tap="writeReview(order)">评价晒单</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/userStore';

const userStore = useUserStore();
const url = $url;
const reviewOrders = ref([]);
const loading = ref(true);

// 格式化规格
const formatSpecs = (specs) => {
  if (!specs) return '';
  return Object.entries(specs).map(([key, value]) => `${key}: ${value}`).join(', ');
};

// 获取待评价订单
const fetchReviewOrders = async () => {
  loading.value = true;
  
  try {
    console.log('开始获取待评价订单...');
    
    // 确保用户已登录
    if (!userStore.isLoggedIn || !userStore.userInfo || !userStore.userInfo.account) {
      console.error('用户未登录，无法获取订单');
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      loading.value = false;
      return;
    }
    
    // 使用 userStore 中的 getOrdersByStatus 方法获取待评价订单
    reviewOrders.value = await userStore.getOrdersByStatus('review');
    console.log('获取到的待评价订单:', reviewOrders.value);
    
  } catch (error) {
    console.error('获取待评价订单失败:', error);
    uni.showToast({
      title: error.message || '获取订单失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

const writeReview = (order) => {
  uni.navigateTo({
    url: `/pages/my/review-write?orderId=${order._id}`
  });
};

// 跳转到商城页面
const goToShop = () => {
  uni.switchTab({
    url: '/pages/shop/index'
  });
};

onMounted(async () => {
  // 检查用户是否登录
  if (!userStore.isLoggedIn) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000
    });
    
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/other/login'
      });
    }, 2000);
    return;
  }
  
  // 加载订单数据
  await fetchReviewOrders();
});
</script>

<style lang="scss" scoped>
.review-orders {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.empty-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 30rpx;
  width: 240rpx;
}

.goto-shop, .refresh-btn {
  font-size: 28rpx;
}

.order-card {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.order-status {
  color: var(--td-warning-color);
}

.order-item {
  display: flex;
  margin-bottom: 20rpx;
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

.item-info {
  flex: 1;
  margin-left: 20rpx;
}

.item-name {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #999;
}

.item-price-qty {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
}

.quantity {
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #f5f5f5;
}

.btn-review {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  background: var(--td-brand-color);
  color: #fff;
}
</style> 